<template>
  <el-input
      v-model="textarea"
      style="width: 800px"
      :rows="5"
      type="textarea"
      placeholder="请输入评论"
  />
  <div style="margin-left: 700px;margin-top: 10px">
    <el-button type="primary" @click="submitted">提交</el-button>
  </div>

<!--水平分割线-->
  <el-divider></el-divider>

  <div style="margin: 20px 20px;">
    <div style="margin: 10px -30px;font-size: 24px;padding: 10px 450px;border-bottom: 1px  #ccc;text-align: left;">
      评论列表
      <el-divider style="padding: 24px 0"></el-divider>
    </div>

    <div style="margin: -80px 10px;text-align: left;">
      <div v-for="item in comments.data" :key="item.id" style="padding: 20px 480px;margin: -80px">
        <div style="flex: 1;padding: 1px 70px;margin-bottom: -20px">
          <span>{{item.userName}}</span>
          <span style="padding: 10px ;font-size: 6px">{{item.createTime}}</span>
        </div>
        <el-avatar :size="50" :src="circleUrl"  />
        <div style="display: inline-block;padding: 10px 20px">{{item.content}}</div>
        <div style="padding: 10px;margin-left: 750px">
          <el-button type="text" plain @click="open(item.userName,item.child)" color="#1E90FF" style="font-size: 18px">回复</el-button>
        </div>
        <el-divider style="padding: 24px 0"></el-divider>
      </div>
    </div>
  </div>
</template>

<script>

import axios from "axios";


export default {
  name: "ChatLog",
  data(){
    return{
      comments:[],
      username:'甄子丹',
      child:[],
      textarea:'',
      reply(username,child) {

      },
      circleUrl:
          'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    }
  },
  mounted() {//页面加载完毕自动调用函数~
    this.sendRequest();
  },
  methods:{
    submitted(){
      // 引入 axios
      const axios = require('axios');

      const commentData = {
        content: this.textarea,//评论内容
        userId: 123, // 假设的评论者ID
        userName: this.username,
        // createTime 通常由后端在保存记录时设置，除非后端API明确允许前端设置
        // isDelete 通常是后端根据业务逻辑来设置，前端通常不直接设置
        blogId: 456, // 假设的博客ID
        parentId: null, // 如果没有父评论，则为 null 或 0
        rootParentId: null, // 如果没有根父评论，则为 null
        // child 字段通常不包含在请求体中，因为它表示子评论列表，
        // 这通常在后端通过关联查询获取，而不是前端直接提供
      };

      // 发起 post 请求
      axios.post('/api/subComments',commentData)
          .then(response => {
            // 请求成功处理
            console.log(response);

            this.sendRequest();
            // 触发自定义事件，将responseData传递出去
            // this.$emit('getData', response.data);

            //需要重新加载页面
            location.reload();
          })
          .catch(error => {
            // 请求失败处理
            console.error(error);
          });
    },

    sendRequest() {
      // 引入 axios
      const axios = require('axios');

      // 发起 post 请求
      axios.get('/api/allComments')
          .then(response => {
            this.comments=response.data;
            // 请求成功处理
            console.log(response.data.data);

            // 触发自定义事件，将responseData传递出去
            // this.$emit('getData', response.data);
          })
          .catch(error => {
            // 请求失败处理
            console.error(error);
          });
    },
    //输入评论内容
    open(username,child) {
      this.$prompt('请输入评论内容', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '你的评论内容是: ' + value,

        });
        this.reply(username,child);//调用回复函数
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    }


}}

</script>

<style scoped>

</style>